<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todo List</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <style>
    .del{text-decoration: line-through;color:#cccccc}
  </style>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          ToDo List
        </a>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-warning">
          <div class="panel-heading">
            <h3 class="text-danger">亲，您有 {{count}} 件事完成</h3>
            <input type="text" class="form-control" @keyup.enter="add" v-model="title">
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item" v-for="item in filterTodos" @dblclick="doubleLi(item)">
                <span :class="{del:item.isSelected}" v-show="cur != item">
                  <input type="checkbox" v-model="item.isSelected"> {{item.title}}
                </span>
                <input v-model="item.title" v-show="cur == item" @keyup.enter="cancel" @blur="cancel" v-focus-aa="cur==item">
                <button class="pull-right btn-danger btn-xs" @click="remove(item)">&bigotimes;</button>
              </li>
            </ul>
          </div>
          <div class="panel-footer">
            <ul class="nav nav-pills">
              <li role="presentation" :class="{active:hash==='all'}"><a href="#/all" >全部</a></li>
              <li role="presentation" :class="{active:hash==='finish'}"><a href="#/finish" >已完成</a></li>
              <li role="presentation" :class="{active:hash==='unfinish'}"><a href="#/unfinish" >未完成</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

</body>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="todo.js"></script>
</html>
